<template>
  <div class="app-container home">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              用户
            </div>
            <count-to :start-val="0" :end-val="home.userCount" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              金额
            </div>
            <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              订单
            </div>
            <count-to :start-val="0" :end-val="home.orderCount" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card shadow="always" class="unifi-margin">
      <div ref="proportionEl" style="height: 250px"></div>
    </el-card>
    <el-card class="unifi-margin">
      <el-row>
        <el-col :span="12">
          <div ref="newOrderEl" style="height: 300px;width: 100%"></div>
        </el-col>
        <el-col :span="12">
          <div ref="newUserEl" style="height: 300px;width: 100%"></div>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import {initHome} from "@/api/statistics/statistics";

export default {
  name: "Index",
  components:{
    CountTo
  },
  data() {
    return {
      home: {
        userCount: 500,
        orderCount: 1700
      },
      // 版本号
      version: "3.8.8",
      proportionEl: '',
      newOrderEl: '',
      newUserEl: '',
      proportionOption: {
        backgroundColor: '#2c343c',
        title: {
          text: '平台基本信息',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0.2, 1]
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['25%', '50%'],
            data: [
              {value: 335, name: '平台租车收入'},
              {value: 310, name: '平台包车收入'},
              {value: 274, name: '录入租车收入'},
              {value: 235, name: '录入包车收入'},
              {value: 400, name: '其他收入'}
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.5)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['75%', '50%'],
            data: [
              {value: 21, name: '商户用户数量'},
              {value: 45, name: '店长用户数量'},
              {value: 120, name: '驾驶员用户数量'},
              {value: 150, name: '业务员用户数量'},
              {value: 12, name: '离职人员数量'},
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.5)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#ff8100',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      lineOption: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          itemWidth: 10,
          data: ['平台租车收入', '平台包车收入', '录入租车收入', '录入包车收入', '其他收入']
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: 0,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '平台租车收入',
            type: 'bar',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '平台包车收入',
            type: 'bar',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '录入租车收入',
            type: 'bar',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '录入包车收入',
            type: 'bar',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '其他收入',
            type: 'bar',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    handleSetLineChartData() {

    },
    init() {
      this.initEchart()
      this.initOrderUser()
      this.initNewUser()
      this.initData()
    },
    initData() {
      initHome().then(res => {
        if (res.code == 200) {
          this.home.userCount = res.data.userCount
          this.home.orderCount = res.data.orderCount
        }
      })

    },
    initNewUser() {
      this.newUserEl = this.$echarts.init(this.$refs.newUserEl)
      let option = JSON.parse(JSON.stringify(this.lineOption))
      let profitType = ['新增商户数量', '新增员工数量']
      let profitTypeData = [{
        name: '新增商户数量',
        type: 'bar',
        stack: 'Total',
        data: [32, 12, 12, 12, 21, 22, 11]
      },
        {
          name: '新增员工数量',
          type: 'bar',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
      ]
      //收益日期折现图
      option.legend.data = profitType
      option.series = profitTypeData
      option.xAxis.boundaryGap = true
      this.newUserEl.setOption(option)
    },
    initOrderUser() {
      this.newOrderEl = this.$echarts.init(this.$refs.newOrderEl)

      let profitType = ['平台租车订单', '平台包车订单', '商户录入租车订单', '商户录入包车订单']
      let profitTypeData = [{
        name: '平台租车订单',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
        {
          name: '平台包车订单',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '商户录入租车订单',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '商户录入包车订单',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        }]
      let option = JSON.parse(JSON.stringify(this.lineOption))
      //收益日期折现图
      option.legend.data = profitType
      option.series = profitTypeData
      this.newOrderEl.setOption(option)
    },
    initEchart() {
      let storePie = [
        {value: 32, name: '商户用户数量'},
        {value: 90, name: '店长用户数量'},
        {value: 300, name: '驾驶员用户数量'},
        {value: 280, name: '业务员用户数量'},
        {value: 120, name: '离职人员数量'},].sort(function (a, b) {
        return a.value - b.value;
      })
      let profitTypePie = [
        {value: 310, name: '平台租车订单数量'},
        {value: 274, name: '平台包车订单数量'},
        {value: 235, name: '商户录入租车订单数量'},
        {value: 400, name: '商户录入包车订单数量'}].sort(function (a, b) {
        return a.value - b.value;
      })
      this.proportionEl = this.$echarts.init(this.$refs.proportionEl)
      this.proportionOption.series[0].data = profitTypePie
      this.proportionOption.series[1].data = storePie
      this.proportionEl.setOption(this.proportionOption)
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.unifi-margin {
  margin-bottom:32px;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>

